<template>
  {{ username }}
  <p>
    <router-link to="/user/detail">详情</router-link>
    <router-link :to="'/user/' + username + '/edit'">修改</router-link>
  </p>
  <hr />
  <!-- 嵌套路由 -->
  <router-view />
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { useRoute, RouterView } from "vue-router";
const { username } = defineProps(["username"]);
const route = useRoute();
// 动态路由参数  /user/:username
// console.log(route.params);
// 路由中的请求参数 /user?id=xxx
// console.log(route.query.id);
// const username = computed(() => {
//   return route.params.username;
// });

// const username = ref("");
// watch(
//   () => route.params.username,
//   (newVal, oldVal) => {
//     console.log("watch", newVal, oldVal);
//     username.value = newVal;
//   }
// );
</script>
